<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="admin/module/macros :: head('新建文章')"></div>
<body class="app sidebar-mini rtl">
<main class="app-content">
    <div th:replace="admin/module/macros :: header"></div>
    <div th:replace="admin/module/macros :: sidebar"></div>
    <div class="app-title">
        <div>
            <h1>
                <i class="fa fa-book"></i>新建文章
            </h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="/admin/article">文章管理</a></li>
            <li class="breadcrumb-item">新建文章</li>
        </ul>
    </div>
    <form id="articleFrom" class="form-horizontal">
        <input type="hidden" id="articleContent" name="articleContent">
        <input type="hidden" id="articleContentMd" name="articleContentMd">
        <input type="hidden" id="articleStatus" name="articleStatus">
        <input type="hidden" id="articlePost" name="articlePost" value="post">
        <div class="row">
            <div class="col-md-8">
                <div class="tile">
                    <div class="table-responsive">
                        <div class="form-group">
                            <input class="form-control" name="articleTitle" id="articleTitle" type="text"
                                   placeholder="输入文章标题">
                        </div>
                        <div class="form-group">
                            <input class="form-control" name="articleUrl" id="articleUrl" type="text"
                                   placeholder="为空则后台生成时间戳链接">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" id="articleMd"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="tile">
                    <div class="form-group row">
                        <label class="control-label col-md-3">文章类型:</label>
                        <div class="col-md-9">
                            <select name="articleType" class="form-control">
                                <optgroup label="请选择">
                                    <option value="0">原创</option>
                                    <option value="1">转载</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">开启评论:</label>
                        <div class="col-md-9">
                            <select name="articleComment" class="form-control">
                                <optgroup label="请选择">
                                    <option value="0">是</option>
                                    <option value="1">否</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">文章分类:</label>
                        <div class="col-md-9">
                            <select name="categorys" class="form-control" id="categorySelect"
                                    multiple="">
                                <optgroup label="点击选择，可多选">
                                    <option th:each="category:${categorys}"
                                            th:value="${category.categoryId}"
                                            th:text="${category.categoryName}"></option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">文章标签:</label>
                        <div class="col-md-9">
                            <select name="tags" class="form-control" id="tagSelect"
                                    multiple="">
                                <optgroup label="点击选择，可多选">
                                    <option th:each="tag:${tags}" th:value="${tag.tagId}"
                                            th:text="${tag.tagName}"></option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">文章略缩图：</label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <input type="text" class="form-control" id="articleThumbnail"
                                       name="articleThumbnail" readonly="readonly"> <span class="input-group-btn">
									<button class="btn btn-default " type="button"
                                            th:onclick="'javascript:openChoice(\''+articleThumbnail+'\')'">选择</button>
								</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">文章摘要:</label>
                        <div class="col-md-9">
                            <textarea class="form-control" name="articleSummary" placeholder="如果为空则自动生成摘要"
                                      rows="3"></textarea>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <button class="btn btn-sm btn-outline-secondary" onclick="save(1)"
                                type="button">保存草稿
                        </button>
                        <button class="btn btn-sm btn-outline-primary pull-right" onclick="save(0)" type="button">发布文章
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</main>
<div th:replace="admin/module/macros :: comm"></div>
<script src="/plugins/layer/layer.js"></script>
<script
        src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script
        src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="/plugins/pinyinjs/pinyin_dict_notone.js"></script>
<script src="/plugins/pinyinjs/pinyinUtil.js"></script>
<script src="/plugins/inline-attachment/codemirror-4.inline-attachment.min.js"></script>
<script type="text/javascript">
    var simplemde = new SimpleMDE({
        element: document.getElementById("articleMd"),
        //如果设置为true，则强制下载Font Awesome（用于图标）。如果设置为false，则阻止下载。默认为undefined，将智能检查是否已包含Font Awesome，然后相应下载。
        autoDownloadFontAwesome: false,
        //如果设置为true，则自动对焦编辑器。默认为false。
        autofocus: true,
        //自动保存
        autosave: {
            //如果设置为true，则自动保存文本。默认为false。
            enabled: true,
            //保存之间的延迟，以毫秒为单位。默认为10000（10s）。
            delay: 5000,
            //您必须设置唯一的字符串标识符，以便SimpleMDE可以自动保存。将此与您网站上其他地方的SimpleMDE实例区分开来的东西。
            uniqueId: "editor-1"
        },
        //调整预览期间解析Markdown的设置
        renderingConfig: {
            ///如果设置为true，将使用highlight.js突出显示
            codeSyntaxHighlighting: true
        },
        //要显示的图标名称数组。可用于显示默认隐藏的特定图标，而无需完全自定义工具栏。
        showIcons: ["code", "table", "clean-block", "horizontal-rule"],
        //如果设置，则自定义选项卡大小。默认为2。
        tabSize: 4,
    });
    $(function () {
        var PC = IsPC();
        if (PC) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}"));
            } catch (ex) {
                style.styleSheet.cssText = ".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}";
            }
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
        }

        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
            uploadUrl: "/admin/attachment/upload"
        });
        /* //生成url链接
       $("#articleTitle").blur(function(){
           $.ajax({
              url:"/admin/article/filter",
              type:"post",
              data:{"articleTitle":pinyinUtil.getPinyin($("#articleTitle").val())},
              dataType:"json",
              success:function(data){
                  $("#articleUrl").val(data.msg);
              }
           });
       });   */
    });

    //选择略缩图
    function openChoice(id) {
        layer.open({
            type: 2,
            title: '所有附件',
            anim: 2,
            area: ['90%', '90%'],
            maxmin: true,
            shadeClose: true,
            content: "/admin/profile/openChoice/" + id
        });
    }

    //保存文章
    function save(articleStatus) {
        var contentMd = simplemde.value();
        console.log(contentMd);
        if (contentMd === "") {
           return showMsg("请输入文章内容！", "error", "3000");
        }
        $("#articleContentMd").val(contentMd);
        $("#articleContent").val(simplemde.markdown(contentMd));
        $("#articleStatus").val(articleStatus);
        var obj = $("#articleFrom").serialize();
        $.ajax({
            type: "post",
            url: "/admin/article/new/save",
            data: obj,
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.flag) {
                    //这个不管用，我也不知道为啥
                    //simplemde.clearAutosavedValue();
                    simplemde.toTextArea();
                    simplemde = null;
                    $.toast({
                        text: data.msg,
                        heading: '提示',
                        icon: 'success',
                        showHideTransition: 'fade',
                        allowToastClose: true,
                        hideAfter: 1000,
                        stack: 1,
                        position: 'top-center',
                        textAlign: 'left',
                        loader: true,
                        loaderBg: '#ffffff',
                        afterHidden: function () {
                            window.location.href = "/admin/article";
                        }
                    });
                } else {
                    return showMsg(data.msg, "error", "3000");
                }
            },error:function (e){
                var res = $.parseJSON(e.responseText);
                return showMsg(res.msg, "error", "3000");
            }
        });
    }

    $('#categorySelect').select2();
    $('#tagSelect').select2();
</script>
</body>
</html>
